<template>
    <div>
        <li class="list-item" v-for="(d,index) in data" :key="index" @click="nextLevelProject(d)">
            <div class="left">
                <img src="../../../assets/image/file.png" alt="" class="type">
                <div class="item-content">
                    <p class="content-title">{{d.name.replace('.' + d.suffix, '')}}</p>
                    <p class="desc">
                        发布人: <span style="margin-right: 10px;">{{d.creater}}</span> 项目: <span style="margin-right: 10px;">{{projectName}}</span><span>{{d.updateTime}}</span>
                    </p>
                </div>
            </div>
            <img src="../../../assets/image/more.png" alt="" class="more" @click.stop="showMore(d)" v-if="type !== 1">
        </li>
    </div>
</template>

<script>
    export default {
        name: 'FileView',
        props: {
            data: Array,
            type: Number,
        },
        data() {
            return {
                projectName: sessionStorage.projectName,
            }
        },
        methods: {
            nextLevelProject(item) {
                this.$emit('callback', item)
            },
            showMore(item) {
                this.$emit('showMore', item)
            }
        }
    }
</script>

<style scoped>
    .list-item {
        /*width: 700px;*/
        height: 130px;
        background: #FFFFFF;
        box-shadow: 0 6px 9px 0 rgba(0, 120, 255, 0.05);
        border-radius: 30px;
        padding: 0 30px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 6px;
    }
    .list-item .left {
        display: flex;
        text-align: left;
        align-items: center;
    }
    .list-item .left .type {
        height: 50px;
        margin-right: 20px;
    }
    .content-title {
        font-size: 26px;
        color: #191919;
        padding-bottom: 20px;
    }
    .desc {
        font-size: 18px;
        color: #C8C8C8;
    }
    .more {
        height: 38px;
    }

</style>